<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>家庭时光</title>
    <link rel="stylesheet" href="../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="../css/framework7-icons.css">
    <style>.list-block .item-title.label{width: 70px;font-size: 15px;}.list-block .item-after{font-size: 15px;}.list-block textarea.resizable {height: 100px;}#myform{width: 100%;}i.icon{font-size:20px !important;}select,input,textarea{font-size: 15px !important;}.hidden{display: none;}.flex-row{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}.flex-column{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: column;-ms-flex-direction: column;-webkit-flex-direction: column;}.flex-nowrap{-webkit-box-lines: single;-moz-box-lines: single;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}.flex-justify-center{-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: center;justify-content: center;}.flex-align-center{-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}</style>
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="views">
    <div class="view view-main">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left sliding"></div>
                <div class="center sliding">游戏引导师申请</div>
                <div class="right sliding"></div>
            </div>
        </div>
        <div class="pages navbar-through toolbar-fixed">
            <div data-page="Index" id="Index" class="page">
                <div class="page-content">
                    <form id="myform">
                        <div class="list-block">
                            <ul>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">person</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">姓名</div>
                                            <div class="item-input">
                                                <input type="text" name="userName">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">circle_half</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">性别</div>
                                            <div class="item-input">
                                                <select name="userGender">
                                                    <option value="m">先生</option>
                                                    <option value="f">女士</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">phone</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">手机</div>
                                            <div class="item-input">
                                                <input type="tel" name="telNum">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">chats_fill</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">微信号</div>
                                            <div class="item-input">
                                                <input type="text" name="wx_num">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">email</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">邮箱</div>
                                            <div class="item-input">
                                                <input type="email" name="email">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">book_fill</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">学历</div>
                                            <div class="item-input">
                                                <select name="eduLevel">
                                                    <option value="1">高中及以下</option>
                                                    <option value="2" selected>本科</option>
                                                    <option value="3">研究生</option>
                                                    <option value="4">博士</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="list-block">
                            <ul>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">gear_fill</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">职业</div>
                                            <div class="item-input">
                                                <input type="text" name="career">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">compass_fill</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">职业状态</div>
                                            <div class="item-input">
                                                <select name="careerstatus">
                                                    <option value="1">全职</option>
                                                    <option value="2">兼职</option>
                                                    <option value="3">离职</option>
                                                    <option value="4">退休</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="align-top">
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">info_fill</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">技能</div>
                                            <div class="item-input">
                                                <textarea class="resizable" name="cert" placeholder="选填，填写您的个人技能及资质证书"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <a href="#" data-searchbar="true" data-searchbar-placeholder="搜索城市" data-page-title="工作城市" data-back-text="返回" data-back-on-select="true" class="item-link smart-select">
                                        <select name="jobcity"></select>
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title label">工作城市</div>
                                                <div class="item-after"></div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-searchbar="true" data-searchbar-placeholder="搜索区域" data-page-title="工作区域" data-back-text="返回" data-back-on-select="true" class="item-link smart-select">
                                        <select name="jobarea"></select>
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title label">工作区域</div>
                                                <div class="item-after">请先选择工作城市</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="list-block">
                            <ul>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">circle_half</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">婚否</div>
                                            <div class="item-input">
                                                <select name="marriage">
                                                    <option value="1">已婚</option>
                                                    <option value="2">单身</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-media"><i class="icon f7-icons">heart_fill</i></div>
                                        <div class="item-inner">
                                            <div class="item-title label">孩子年龄</div>
                                            <div class="item-input">
                                                <input type="tel" name="childage">
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <a href="#" data-searchbar="true" data-searchbar-placeholder="搜索城市" data-page-title="居住城市" data-back-text="返回" data-back-on-select="true" class="item-link smart-select">
                                        <select name="livecity"></select>
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title label">居住城市</div>
                                                <div class="item-after"></div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-searchbar="true" data-searchbar-placeholder="搜索区域" data-page-title="居住区域" data-back-text="返回" data-back-on-select="true" class="item-link smart-select">
                                        <select name="livearea">
                                        </select>
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title label">居住区域</div>
                                                <div class="item-after">请先选择居住城市</div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="list-block">
                            <ul>
                                <li>
                                    <a href="#" data-page-title="空余时间" data-back-text="返回" class="item-link smart-select">
                                        <select name="freetime" multiple>
                                            <optgroup label="周一">
                                                <option value="11">周一上午</option>
                                                <option value="12">周一下午</option>
                                                <option value="13">周一晚上</option>
                                            </optgroup>
                                            <optgroup label="周二">
                                                <option value="21">周二上午</option>
                                                <option value="22">周二下午</option>
                                                <option value="23">周二晚上</option>
                                            </optgroup>
                                            <optgroup label="周三">
                                                <option value="31">周三上午</option>
                                                <option value="32">周三下午</option>
                                                <option value="33">周三晚上</option>
                                            </optgroup>
                                            <optgroup label="周四">
                                                <option value="41">周四上午</option>
                                                <option value="42">周四下午</option>
                                                <option value="43">周四晚上</option>
                                            </optgroup>
                                            <optgroup label="周五">
                                                <option value="51">周五上午</option>
                                                <option value="52">周五下午</option>
                                                <option value="53">周五晚上</option>
                                            </optgroup>
                                            <optgroup label="周六">
                                                <option value="61">周六上午</option>
                                                <option value="62">周六下午</option>
                                                <option value="63">周六晚上</option>
                                            </optgroup>
                                            <optgroup label="周日">
                                                <option value="71">周日上午</option>
                                                <option value="72">周日下午</option>
                                                <option value="73">周日晚上</option>
                                            </optgroup>
                                        </select>
                                        <div class="item-content">
                                            <div class="item-inner">
                                                <div class="item-title label">空余时间</div>
                                                <div class="item-after"></div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li class="align-top">
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">经历</div>
                                            <div class="item-input">
                                                <textarea class="resizable" name="experience" placeholder="选填，您参加志愿者或社会活动的经历是什么？"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="align-top">
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">兴趣爱好</div>
                                            <div class="item-input">
                                                <textarea class="resizable" name="hobby" placeholder="选填"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="list-block">
                            <ul>
                                <li class="align-top">
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">报名原因</div>
                                            <div class="item-input">
                                                <textarea class="resizable" name="reason" placeholder="您报名游戏引导师的原因是什么？"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="align-top">
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title label">期待</div>
                                            <div class="item-input">
                                                <textarea class="resizable" name="hope" placeholder="选填，您对游戏引导师培训的期待是什么？"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div style="width: 100%;height: 10vw;text-align: center;line-height: 10vw;" class="sub-btn color-white bg-green">提交</div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
<script type="text/template" id="Citylist">
    {{#each this}}
    <optgroup label="{{province}}">
        {{#each citys}}
        <option value="{{cityid}}">{{city}}</option>
        {{/each}}
    </optgroup>
    {{/each}}
</script>
<script type="text/template" id="Arealist">
    {{#each this}}
    <option value="{{areaid}}">{{area}}</option>
    {{/each}}
</script>

<script type="text/javascript" src="../js/wx.jssdk.min.1.2.0.js"></script>
<script type="text/javascript" src="../js/framework7.min.js"></script>
<script type="text/javascript">!function(){function f(c,d){a.ajax({contentType:"OPTIONS",crossDomain:!0,method:"POST",url:c,data:{},dataType:"json",xhrFields:{withCredentials:!0},success:function(a){0==a.code?window.location.href=d:b=parseInt(a.data.uid)},error:function(){window.location.href=d}})}function g(){var a='<div class="flex-row flex-nowrap flex-justify-center flex-align-center loader-wrap"><i class="f7-icons color-green hidden succ" style="margin-right: 15px;width: 25px;height: 25px;">check</i><i class="f7-icons color-red hidden fail" style="margin-right: 15px;width: 25px;height: 25px;">close</i><span class="preloader proc" style="margin-right: 15px;width: 25px;height: 25px;"></span><span class="info bold">提交内容</span></div>';d.modal({text:a})}function h(){var b=a(".loader-wrap .succ"),c=a(".loader-wrap .info"),e=a(".loader-wrap .proc");e.addClass("hidden"),b.removeClass("hidden"),c.html("上传成功"),setTimeout(function(){d.closeModal()},1e3)}function i(){var b=a(".loader-wrap .fail"),c=a(".loader-wrap .info"),e=a(".loader-wrap .proc");e.addClass("hidden"),b.removeClass("hidden"),c.html("系统繁忙，请重试"),setTimeout(function(){d.closeModal()},2e3)}var b,a=Dom7,c=!1,d=new Framework7({animateNavBackIcon:!0,modalTitle:"家庭时光",modalButtonOk:"确认",modalButtonCancel:"取消",template7Pages:!0}),e=d.addView(".view-main",{dynamicNavbar:!0});f("http://api.nldou.com/ucenter/checkUserLogin","http://api.nldou.com/ucenter/weixinlogin?pid=6329"),a.ajax({url:"http://api.nldou.com/weixinapi/init_wx_jsapi",method:"GET",data:{fromUrl:window.location.href},dataType:"json",success:function(a){1==a.code&&wx.config({debug:!1,appId:a.data.appid,timestamp:a.data.timestamp,nonceStr:a.data.nonceStr,signature:a.data.signature,jsApiList:["onMenuShareTimeline","onMenuShareAppMessage"]})}}),wx.ready(function(){wx.onMenuShareTimeline({title:"家庭时光游戏引导师申请表",link:"http://api.nldou.com/ucenter/weixinlogin?pid=6329",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",success:function(){return!0},cancel:function(){return!0}}),wx.onMenuShareAppMessage({title:"家庭时光游戏引导师申请表",desc:"家庭时光游戏引导师申请表，通过审核后即可参加课程！",link:"http://api.nldou.com/ucenter/weixinlogin?pid=6329",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",type:"link",success:function(){return!0},cancel:function(){return!0}}),wx.onMenuShareQQ({title:"家庭时光游戏引导师申请表",desc:"家庭时光游戏引导师申请表，通过审核后即可参加课程！",link:"http://api.nldou.com/ucenter/weixinlogin?pid=6329",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",type:"link",success:function(){return!0},cancel:function(){return!0}}),wx.onMenuShareWeibo({title:"家庭时光游戏引导师申请表",desc:"家庭时光游戏引导师申请表，通过审核后即可参加课程！",link:"http://api.nldou.com/ucenter/weixinlogin?pid=6329",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",success:function(){return!0},cancel:function(){return!0}}),wx.onMenuShareQZone({title:"家庭时光游戏引导师申请表",desc:"家庭时光游戏引导师申请表，通过审核后即可参加课程！",link:"http://api.nldou.com/ucenter/weixinlogin?pid=6329",imgUrl:"http://wap.nldou.com/gamer/img/1.jpg",success:function(){return!0},cancel:function(){return!0}})}),d.CitylistTemplate=Template7.compile(a("script#Citylist").html()),d.ArealistTemplate=Template7.compile(a("script#Arealist").html()),a.ajax({method:"GET",url:"http://api.nldou.com/gamer/getCityList",data:{},dataType:"json",success:function(b){if(console.log("获取城市列表",b),1==b.code){var c=d.CitylistTemplate(b.data);a('select[name="jobcity"]').html(c),a('select[name="livecity"]').html(c)}}}),a('select[name="jobcity"]').on("change",function(){var b=a(this).val();a.ajax({method:"POST",url:"http://api.nldou.com/gamer/getAreaListBycity",data:{cityid:b},dataType:"json",success:function(b){if(console.log("获取区域列表",b),1==b.code){var c=d.ArealistTemplate(b.data);a('select[name="jobarea"]').html(c)}}})}),a('select[name="livecity"]').on("change",function(){var b=a(this).val();a.ajax({method:"POST",url:"http://api.nldou.com/gamer/getAreaListBycity",data:{cityid:b},dataType:"json",success:function(b){if(console.log("获取区域列表",b),1==b.code){var c=d.ArealistTemplate(b.data);a('select[name="livearea"]').html(c)}}})}),a(".sub-btn").on("click",function(){var f,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E;if(c===!1){if(c=!0,f=d.formToData("#myform"),j=f["userName"].replace(/\s/g,""),k=j.length,0==k)return d.alert("请输入姓名",""),c=!1,!1;if(l=f["userGender"],k=l.length,0==k)return d.alert("请选择性别",""),c=!1,!1;if(m=f["telNum"],!/^1\d{10}$/.test(m))return d.alert("请输入正确的11位手机号",""),c=!1,!1;if(n=f["wx_num"].replace(/\s/g,""),k=n.length,0==k)return d.alert("请输入微信号",""),c=!1,!1;if(o=f["email"].replace(/\s/g,""),k=o.length,0==k)return d.alert("请输入邮箱",""),c=!1,!1;if(-1==o.indexOf("@"))return d.alert("请输入正确的邮箱",""),c=!1,!1;if(p=f["eduLevel"],k=p.length,0==k)return d.alert("请选择学历",""),c=!1,!1;if(q=f["career"].replace(/\s/g,""),k=q.length,0==k)return d.alert("请输入职业",""),c=!1,!1;if(r=f["careerstatus"],k=r.length,0==k)return d.alert("请选择职业状态",""),c=!1,!1;if(s=f["cert"].replace(/\n|\r\n|\r/g,"<br>").replace(/\s/g,""),t=f["jobcity"],k=t.length,0==k)return d.alert("请选择工作城市",""),c=!1,!1;if(u=f["jobarea"],k=u.length,0==k)return d.alert("请选择工作区域",""),c=!1,!1;if(v=f["marriage"],k=v.length,0==k)return d.alert("请选择婚姻状况",""),c=!1,!1;if(w=f["childage"],!/^[0-9]{1,2}$/.test(w))return d.alert("请输入正确孩子年龄",""),c=!1,!1;if(x=f["livecity"],k=x.length,0==k)return d.alert("请选择居住城市",""),c=!1,!1;if(y=f["livearea"],k=y.length,0==k)return d.alert("请选择居住区域",""),c=!1,!1;if(z=f["freetime"],k=z.length,0==k)return d.alert("请选择空余时间",""),c=!1,!1;if(A=f["experience"].replace(/\n|\r\n|\r/g,"<br>").replace(/\s/g,""),B=f["hobby"].replace(/\n|\r\n|\r/g,"<br>").replace(/\s/g,""),C=f["reason"].replace(/\n|\r\n|\r/g,"<br>").replace(/\s/g,""),k=C.length,0==k)return d.alert("请输入报名原因",""),c=!1,!1;D=f["hope"].replace(/\n|\r\n|\r/g,"<br>").replace(/\s/g,""),E={uid:b,userName:j,userGender:l,telNum:m,wx_num:n,email:o,eduLevel:p,career:q,careerstatus:r,cert:s,jobcity:t,jobarea:u,marriage:v,childage:w,livecity:x,livearea:y,freetime:z,experience:A,hobby:B,reason:C,hope:D},console.log(E),g(),a.ajax({contentType:"OPTIONS",crossDomain:!0,method:"POST",url:"http://api.nldou.com/gamer/register",data:E,dataType:"json",success:function(a){console.log("上传成功",a),0==a.code?(i(),c=!1):(h(),c=!1,e.router.load({url:"registerok.html"}))},error:function(a){console.log("上传失败",a),i(),c=!1}})}})}();</script>
</body>
</html>